<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{lib/layui-v2.6.3/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
  <style>
    .layui-table-cell {
      height: 45px;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label" style="width: 130px">学名/拉丁名</label>
              <div class="layui-input-inline">
                <input type="text" name="plantName" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
            <div class="layui-form-item" style="margin-top: 10px">
            <div class="layui-inline">
              <label class="layui-form-label">类群</label>
              <div class="layui-input-block">
                <select name="categoryId" lay-filter="category">
                  <option value="">--------</option>
                  <option th:each="item : ${clist}" th:value="${item.categoryId}" th:text="${item.categoryName}"></option>

                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">科</label>
              <div class="layui-input-block">
                <select id="familySelect" name="familyId" lay-filter="family">
                  <option value="">--------</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">属</label>
              <div class="layui-input-block">
                <select id="genusSelect" name="genusId" lay-filter="genus">
                  <option value="">--------</option>
                </select>
              </div>
            </div>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="removeBatch">删除所选项</button>
        <button class="layui-btn layui-btn-normal layui-btn data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn" lay-event="download">
          <i class="layui-icon">&#xe601;</i>导出植物
        </button>
        <button type="button" class="layui-btn" id="excel-upload">
          <i class="layui-icon">&#xe67c;</i>批量添加
        </button>
        <a class="layui-btn-xs" id="excel-template" href="https://share-cloud-plant.oss-cn-beijing.aliyuncs.com/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx">下载植物导入模板</a>
        <!--        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
      </div>
    </script>

    <table id="currentTableId" lay-filter="currentTableFilter"></table>


    <script type="text/html"  id="currentTableBar">
      <a class="layui-btn layui-btn-normal data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:inline="none">
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
    var categoryName;
    table.render({
      elem: '#currentTableId',
      url: '/admin/works/page',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cellHeight:'45',
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'plantId', width: 100, title: 'ID', sort: true},
        {field: 'plantName', width: 100, title: '作品名'},
        {field: 'plantPicture', width: 80, title: '植物图片',templet:function (d) {
            return "<img src='" + d.plantPicture + "' height=\"40\" width=\"40\" />"}},
        {field: 'plantSpecific', width: 80, title: '学名'},
        {field: 'latinName', width: 80, title: '拉丁名'},
        {field: 'categoryId', width: 80, title: '类群ID'},
        {field: 'familyId', width: 80, title: '科属ID'},
        {field: 'plantDescription', width: 80, title: '植物描述'},
        {field: 'address', width: 80, title: '拍摄地址'},
        {field: 'userId', width: 80, title: '用户ID'},
        {field: 'isChoiceness', width: 80, title: '是否精选', templet:function (d) {
            return d.isChoiceness == 0 ? "否":"是" }},
        {field: 'createTime', width: 200, title: '创建时间', templet:function (d) {
            return layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss');}},
        {title: '操作',minWidth:120 ,toolbar: '#currentTableBar', align: "center"}
      ]],
      response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        ,statusCode: "001" //规定成功的状态码，默认：0
        ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        ,countName: 'total' //规定数据总数的字段名称，默认：count
        ,dataName: 'data' //规定数据列表的字段名称，默认：data
      },
      request: {
        pageName: 'currentPage' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });

    // 监听下拉框操作
    form.on('select(category)', function (data) {
      var key = data.value;
      categoryName = key;
      // console.log(key);
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          categoryId: key
        }
      }, 'data');
      if (key !== "") {
        $.get({
          url: "/admin/category/show/" + key,
          success: function (d) {
            // console.log(d);
            myData = d.data
            // console.log(myData);
            var tmp = '<option value="">--------</option>';
            for (var i in myData) {
              // console.log(i);
              tmp += '<option value="' + myData[i].familyId + '">' + myData[i].familyName + '</option>';
            }
            $("#familySelect").html(tmp);
            form.render();
          }, error: function () {
            layer.alert('请求失败');
          }
        });
      }else {
        form.render();
      }
    });
    // 监听下拉框操作
    form.on('select(family)', function (data) {
      var key = data.value;
      // console.log(key);
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          categoryId: categoryName,
          familyId: key
        }
      }, 'data');
      if (key !== "") {
        $.get({
          url: "/admin/category/family/show/genus/" + key,
          success: function (d) {
            myData = d.data
            var tmp = '<option value="">--------</option>';
            for (var i in myData) {
              tmp += '<option value="' + myData[i].familyId + '">' + myData[i].familyName + '</option>';
            }
            $("#genusSelect").html(tmp);
            form.render();
          }, error: function () {
            layer.alert('请求失败');
          }
        });
      } else {
        form.render();
      }
    });
    // 监听下拉框操作
    form.on('select(genus)', function (data) {
      var key = data.value;
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          categoryId: categoryName,
          familyId: key
        }
      }, 'data');
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var key = data.field.plantName;
      // console.log(key);
      // 执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          fuzzyName: key
        }
      }, 'data');
      return false;
    });

    /**
     * excel批量上传
     */
    layui.use('upload', function(){
      var upload = layui.upload;

      //执行实例
      var uploadInst = upload.render({
        elem: '#excel-upload' //绑定元素
        ,url: '/admin/user/save/excel' //上传接口
        ,accept: 'file'
        ,acceptMime: 'file'
        ,exts: 'xls|xlsx'
        ,done: function(res){
          //上传完毕回调
          if (res.code == '001'){
            layer.msg("添加成功");
            table.reload('currentTableId', {
              page: {
                curr: 1,
                limit:15
              }
            }, 'data');
          }else{
            layer.msg(resp.msg);
          }
        }
        ,error: function(){
          //请求异常回调
        }
      });
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      switch (obj.event) {
        case 'add':
          var index = layer.open({
            title: '添加用户',
            type: 2,
            shade: 0.2,
            maxmin:true,
            shadeClose: true,
            area: ['70%', '80%'],
            content: '/admin/plant/save/html',
          });
          $(window).on("resize", function () {
            layer.full(index);
          });
          break;
        case 'download':
          window.alert("功能尚未完善");
          // window.location.href="/admin/user/export"
          break;
        case 'removeBatch':
          window.alert("功能尚未完善");
          break;
      }
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var plantInfo = obj.data;
      if (obj.event === 'edit') {
        var index = layer.open({
          title: '编辑植物',
          type: 2,
          shade: 0.2,
          maxmin:true,
          shadeClose: true,
          area: ['70%', '80%'],
          //访问对应的页面
          content: '/admin/plant/update/html?categoryId='+plantInfo.categoryId +"&familyId="+plantInfo.familyId,
          success:function (layero,index) {
            var body = layer.getChildFrame('body', index);
            //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
            body.find("#plantId").val(plantInfo.plantId);
            body.find("#plantName").val(plantInfo.plantName);
            body.find("#plantSpecific").val(plantInfo.plantSpecific);
            body.find("#latinName").val(plantInfo.latinName);
            // body.find("#categoryId").val(plantInfo.categoryId);
            // body.find("#familyId").val(plantInfo.familyId);
            body.find("#plantDescription").val(plantInfo.plantDescription);
            body.find("#address").val(plantInfo.address);
            body.find('#demo1').attr('src', plantInfo.plantPicture);
          }
        });
        $(window).on("resize", function () {
          layer.full(index,plantInfo);
        });
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('确认要删除数据?', function (index) {
          $.post({
            url:"/admin/works/remove",
            data:{
              plantId:obj.data.plantId
            },
            success:function (resp){
              if (resp.code == '001'){
                layer.msg(resp.msg);
                table.reload('currentTableId', {
                  page: {
                    curr: 1,
                    limit:15
                  }
                }, 'data');
              }else{
                layer.msg(resp.msg);
              }
            },
            field:function (resp) {}
          })
          layer.close(index);
        });
      }
    });

  });

</script>

</body>
</html>